<script setup lang="ts">
import { useUserStore } from '@/store/user.js';
import { useModalStore } from '@/store/modal.js';

const user = useUserStore();
const modal = useModalStore();
</script>

<template>
  <div
    class="rounded shadow-[0_0_10px_0_#d7d7d7] flex items-center"
    :style="{ height: '380px', width: '160px' }"
  >
    <div class="w-40 h-60">
      <div
        v-if="user.isLogin"
        class="flex flex-col items-center justify-center h-full"
      >
        欢迎你:
        <span class="text-orange font-bold">{{ user.users.account }}</span>
        <el-button
          class="text-center bg-#ff602a cursor-pointer rounded leading-2"
          @click="user.logout"
        >
          退出登录
        </el-button>
      </div>
      <div v-else class="flex flex-col items-center justify-center h-full">
        <img
          class="cursor-pointer mb-1 mt-10 w-50 h-50"
          src="https://front.cdn.xdclass.net/images/new.webp"
        />
        <el-button
          @click="modal.switchLoginVisible()"
          class="text-center bg-#ff602a cursor-poihter rounded-71px W-130px h-24px text-12px p2 leading"
        >
          登录 / 注册
        </el-button>
      </div>
    </div>
  </div>
</template>

<!-- UserOrUnlogin.vue -->
<style scoped>
.rounded {
  border-radius: 0.25rem;
}
.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.w-40 {
  width: 10rem;
}
.h-60 {
  height: 15rem;
}
.flex-col {
  flex-direction: column;
}
.justify-center {
  justify-content: center;
}
.h-full {
  height: 100%;
}
.text-orange {
  color: orange;
}
.font-bold {
  font-weight: 700;
}
.text-center {
  text-align: center;
}
.cursor-pointer {
  cursor: pointer;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.w-50 {
  width: 12.5rem;
}
.h-50 {
  height: 12.5rem;
}
.rounded-71px {
  border-radius: 71px;
}
.W-130px {
  width: 130px;
}
.h-24px {
  height: 24px;
}
.text-12px {
  font-size: 12px;
}
.p2 {
  padding: 0.5rem;
}
.leading {
  line-height: 1;
}
</style>
